<template>
  <div class="container">
    <div v-if="!error" class="content">
      <img class="upload-success-icon" src="@/assets/icons/upload-success.png" alt="">
      <h2 class="success-header">成功上传<span v-text="importCount"></span>条数据</h2>
      <Poptip placement='bottom' title="导入错误">
        <h3 class="error-header">共<span class="error-number" v-text="errorCount"></span>条数据未上传成功</h3>
        <div style="width:300px;white-space:normal;" slot="content" v-if="errors ? true : false">
          <p v-for="(item, i) in errors " :key="i" v-text="item"></p>
        </div>
      </Poptip>
      <Button @click="$emit('success')" class="btn" type="success">确定</Button>
    </div>
    <div v-if="error" class="content">
      <img class="upload-success-icon" src="@/assets/icons/upload-error.png" alt="">
      <h2 class="success-header">数据上传失败,请重新上传</h2>
      <Button @click="$emit('previous')" class="btn" type="success">重新上传</Button>
    </div>
  </div>
</template>
<style scoped>
.container{
  width: calc(100% - 50px);
  margin: 30px 0px;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.success-header{
  margin-top: 30px;
}
.error-header{
  margin-top: 10px;
}
.error-number{
  color: red;
}
.btn{
  width: 200px;
  margin-top: 30px;
}
</style>
<script>
export default {
  name: 'step-three',
  props: {
    errors: [],
    error: false,
    importCount: 0,
    errorCount: 0
  }
}
</script>
